<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="6" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							登录密码重置
						</div>
					</div>
					<div class="login-box">
						<!-- 	<div class="reset-box">
							<div class="reset-user-pic">
								<img src="../assets/code.png" alt="">
							</div>
							<div class="reset-user-name">
								<span class="reset-user-title">联系人</span><br>
								<span class="reset-user-value">{{ exhibitor_contacts }}</span>
							</div>
							<div class="reset-user-company">
								<span class="reset-user-title">公司名称</span><br>
								<span class="reset-user-value">{{ exhibitor_name }}</span>
							</div>
						</div> -->
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm">
							<div>
								<el-form-item label="请输入原始密码" prop="old_password" required>
									<el-input type="password" v-model="ruleForm.old_password"></el-input>
								</el-form-item>
								<el-form-item label="请输入新密码" prop="password" required>
									<el-input min="6" type="password" v-model="ruleForm.password"
										autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item label="重复输入新密码" prop="new_password" required>
									<el-input min="6" type="password" v-model="ruleForm.new_password"
										autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item class="form-btn-box">
									<el-button @click="resetForm('ruleForm')">返回</el-button>
									<el-button type="primary" @click="submitForm('ruleForm')">更改</el-button>
									<el-button @click="resetForm('ruleForm')">重填</el-button>
								</el-form-item>
							</div>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		resetPassword
	} from "/src/api/resetPassword.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'LoginComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		props: {
			msg: String
		},
		data() {
			var validateOldPassword = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入旧密码'));
				} else {
					callback();
				}
			};
			var validatePassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入新密码'));
				} else if (!/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\d\D]).{6,}$/.test(value)) {
					callback(new Error('密码至少6位，包含大小写字母和数字'));
				} else {
					callback();
				}
			};
			var validateNewPassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入新密码'));
				} else if (!/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[\d\D]).{6,}$/.test(value)) {
					callback(new Error('密码至少6位，包含大小写字母和数字'));
				} else {
					callback();
				}
			};
			return {
				activeIndex: '1',
				exhibitor_name: '',
				exhibitor_contacts: '',
				ruleForm: {
					old_password: '',
					password: '',
					new_password: ''
				},
				rules: {
					old_password: [{
						validator: validateOldPassword,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePassword,
						trigger: 'blur'
					}],
					new_password: [{
						validator: validateNewPassword,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						resetPassword(this.ruleForm).then(data => {
							if (data.data.code == 200) {
								this.$message({
									message: '修改成功！',
									type: 'success'
								});
								localStorage.setItem('exhibitor_update_pwd', 1);
								history.go(0);
							} else {
								this.$message({
									message: data.data.message,
									type: 'error'
								});
							}
						}).catch((error) => {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		created() {
			this.exhibitor_contacts = localStorage.getItem('exhibitor_contacts');
			this.exhibitor_name = localStorage.getItem('exhibitor_name');
		}
	}
</script>

<style scoped>
	.reset-user-company {
		margin-top: 10px
	}

	.reset-user-name {
		margin-top: 85px
	}

	.reset-user-value {
		color: #9A9A9A
	}

	.reset-user-title {
		font-weight: 600;
		color: #000;
		line-height: 1.5;
	}

	.reset-user-pic img {
		width: 100px;
		height: 100px;
	}

	.reset-user-pic {
		margin-top: 30px;
	}

	.reset-box {
		width: 320px;
		float: left;
		height: 280px;
		background: #EEF4FE;
		border-radius: 5px;
		margin-left: 20px;
	}

	.el-button {
		margin-left: 40px;
		background: none;
		box-sizing: border-box;
		border: 1.5px rgb(0, 102, 173) solid;
		color: rgb(0, 102, 173);
		backdrop-filter: blur(3px);
		font-weight: 600;
		margin-top: 15px;
		width: 118px;
		letter-spacing: 4px
	}

	.el-button:nth-of-type(2) {
		background-color: rgb(0, 102, 173);
		color: #fff;
	}

	:deep(.form-btn-box .el-form-item__content) {
		margin-top: 25px;
		margin-left: -25px !important;
	}

	.el-form-item__content {
		flex-wrap: nowrap;
	}

	.el-form-item__error {
		padding-top: 6px;
	}

	.el-form-item {
		margin-bottom: 25px
	}

	.el-input__inner {
		color: #fff;
	}

	.el-input__wrapper {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		border: 1px solid #DDDFE4;
		backdrop-filter: blur(3px);
	}

	.el-form {
		width: 450px;
		margin: auto;
		padding-top: 30px
	}

	#el-id-5468-23 {
		width: 54px !important;
	}

	:deep(.el-form-item__label) {
		width: 140px !important;
		color: rgb(0, 102, 173);
		font-size: 16px;
	}

	.login-box {
		width: 860px;
		height: 300px;
		border: 1px #eeeeee solid;
		margin: 20px auto;
		border-radius: 3px;
		padding-top: 20px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 420px;
		overflow: hidden;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
		margin-bottom: 30px;
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>